<script lang="ts">
	import { goto } from '$utils/intercept';
	import { Divider } from '$components/basic';
	import { createDialog } from '$components/basic/dialog/dialog';
	import { createMessage, showLoading } from '$components/basic/message';
	import { getValue } from '$utils/get';
	import { handleReq } from '@/hooks/handleReq';
	import Button from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import ButtonIconText from './ButtonIconText.svelte';

	export let orderInfo: Partial<Order.Order>;
	let showAll = true;

	$: len = showAll ? orderInfo.order_items!.length : 1;
	$: items = orderInfo.order_items!.slice(0, len);
	$: order_items = orderInfo.order_items!;

	const seriaInfo = [
		{ name: 'Type: ', icon: 'package_2', key: 'typeName' },
		{ name: 'Series: ', icon: 'content_copy', key: 'series' },
		{ name: 'Code: ', icon: 'barcode', key: 'code' },
		{ name: 'Dash: ', icon: 'sensors', key: 'dash' },
		{ name: 'Vision: ', icon: 'attach_file', key: 'countryName' },
		{ name: 'Casepack: ', icon: 'wifi_tethering', key: 'casepack' }
	];

	const bottomInfo = [
		{ name: 'Delivery Date: ', icon: 'calendar_month', key: 'ship_at' },
		{ name: 'Order Quantity: ', icon: 'Numbers', key: 'subQty' },
		{ name: 'Order Case: ', icon: 'package_2', key: 'subCarton' }
	];

	const dispatch = createEventDispatcher();

	const viewProductDetail = (id: number) => goto('/detail/' + id);
	const viewDetail = () =>
		getValue(orderInfo, 'status') && goto(`/order/detail?id=${orderInfo.id}`);
	const viewInvoice = () =>
		getValue(orderInfo, 'status') && goto('/order/invoice?id=' + orderInfo.id);
	const viewExpress = () =>
		getValue(orderInfo, 'status') &&
		goto(
			`/order/tracking?orderId=${orderInfo.id}&shipNumber=${getValue(orderInfo, 'express.shipNumber')}`
		);
	const cancelOrder = () => {
		if (!getValue(orderInfo, 'status')) return;
		const callback = async () => {
			console.log('cancel order');
			const msg = showLoading();
			const params = { orderId: orderInfo.id };
			const { error } = await handleReq('/order/cancel', { params, isInit: true });
			if (!error) msg.close();
			dispatch('refresh');
		};
		createDialog('Cancel Order', 'Are you sure to cancel this order?', callback, 'Warning', true);
	};

	const copyText = () => {
		const text = orderInfo.orderno;
		navigator.clipboard.writeText(text as string);
		createMessage({ type: 'success', message: 'Copied!', duration: 2000 });
	};
</script>

<div
	class="w-full scroll-smooth"
	style={getValue(orderInfo, 'status') ? '' : ' filter: grayscale(1); cursor: not-allowed'}
>
	<div class="w-full bg-gray-1 hover:bg-blue-1 flex flex-col gap-20px p-10px">
		<div
			class="w-full bg-white h-36px line-height-36px px-10px flex-cc font-size-15px gap-20px color-#555"
		>
			<div class="flex-cc">
				<div>Order No.# {orderInfo.orderno}</div>
				<button
					on:click={copyText}
					class="border-none bg-transparent outline-none material-symbols-outlined font-size-14px select-none color-blue-7 hover:color-blue-5 active:color-blue-9 cursor-pointer"
				>
					content_copy
				</button>
			</div>
			<div>Creation Date: {orderInfo.created_at}</div>
			<div class="flex-1"></div>
			<span
				class="gap-5px mdc-button"
				style={getValue(orderInfo, 'status') ? '' : '--mdc-theme-primary: #d1d5db; cursor: default'}
			>
				<span class="material-symbols-outlined">
					{orderInfo.statusIcon}
				</span>
				{getValue(orderInfo, 'statusName')}
			</span>
		</div>
		<div class="w-full flex flex-row gap-20px">
			<div class="flex-1">
				{#each items as item, index}
					<div class="w-full flex flex-row items-center gap-10px">
						<button
							class="outline-none border-none w-140px h-140px ml-20px p-0"
							on:click={() => viewProductDetail(item.id)}
						>
							<img src={item.thumb} class="w-140px h-140px cursor-pointer" alt="order item" />
						</button>
						<div class="h-160px w-1px ml-20px" style="--mdc-theme-primary: #d1d5db">
							<Divider direction="vertical" />
						</div>
						<div class="order-detail h-140px flex-1 flex flex-col gap-10px ml-20px">
							<div class="title font-size-22px cursor-pointer">
								{item.title ? item.title : 'No Title'}
							</div>
							<div class="flex-1 w-70% h-full grid grid-cols-3 gap-5px">
								{#each seriaInfo as seria}
									<div class="flex flex-row items-center gap-5px line-height-36px h-36px">
										<span class="material-symbols-outlined"> {seria.icon} </span>
										<span class="prop-name">{seria.name}</span>
										<span class="prop-value">{item[seria.key]}</span>
									</div>
								{/each}
							</div>
						</div>
					</div>
					{#if index !== len - 1}
						<Divider style="--mdc-theme-primary: #d1d5db" />
					{/if}
				{/each}
			</div>
			<div
				class="order-handle-buttons w-200px h-140px flex flex-col justify-center gap-10px p-10px"
			>
				<ButtonIconText icon="visibility" text="view" on:click={viewDetail} />
				<ButtonIconText icon="picture_as_pdf" text="invoice" on:click={viewInvoice} />
				{#if orderInfo.cancel}
					<ButtonIconText icon="cancel" text="cancel" on:click={cancelOrder} />
				{/if}
				{#if orderInfo.status === 5}
					<ButtonIconText icon="flight_takeoff" text="track" on:click={viewExpress} />
				{/if}
			</div>
		</div>
	</div>

	<button
		on:click={() => (showAll = !showAll)}
		class="reset-button flex flex-row justify-between cursor-pointer items-center bg-blue-7 w-full h-40px line-height-20px text-center font-size-15px color-white"
	>
		<div class="flex flex-row items-center gap-10px">
			{#if order_items.length > 1}
				{#if showAll}
					<span class="material-symbols-outlined"> keyboard_arrow_up </span>
				{:else}
					<span class="material-symbols-outlined"> keyboard_arrow_down </span>
				{/if}
				<span>{showAll ? 'Hidden' : 'Show More'}</span>
			{/if}
		</div>
		<div class="flex flex-row items-center gap-15px pr-10px">
			{#each bottomInfo as item}
				<div class="flex flex-row items-center gap-5px">
					<span class="material-symbols-outlined"> {item.icon} </span><span>
						{item.name}
						{getValue(orderInfo, item.key, '--')}
					</span>
				</div>
			{/each}
			<div class="flex flex-row items-center gap-5px">
				<span class="material-symbols-outlined"> attach_money </span><span>
					Sub Amount: {getValue(orderInfo, 'subAmount', '--')} USD
				</span>
			</div>
		</div>
	</button>
</div>
